<template>
    <div class="app-container calendar-list-container">
    <el-form :rules="rules" ref="dataForm" :model="passwd" label-position="right" label-width="220px" style='width: 600px; margin-left:50px;'>
      <el-form-item prop="oldPassword" label="旧密码">
        <el-col :span="22">
          <el-input name="oldPassword" prefix-icon="" :type="oldPwdType" v-model="passwd.oldPassword" autoComplete="on"
                  placeholder="旧密码" />
        </el-col>
        <el-col class="line" :span="1">&nbsp;</el-col>
        <el-col :span="1">
          <span class="show-pwd" @click="showPwd(1)"><svg-icon icon-class="eye" /></span>
        </el-col>
      </el-form-item>
      <el-form-item prop="newPassword" label="新密码">
        <el-col :span="22">
          <el-input name="newPassword" :type="newPwdType" v-model="passwd.newPassword" autoComplete="on"
                    placeholder="新密码" />
        </el-col>
        <el-col class="line" :span="1">&nbsp;</el-col>
        <el-col :span="1">
          <span class="show-pwd" @click="showPwd(2)"><svg-icon icon-class="eye" /></span>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align:center">
      <el-button @click="">取 消</el-button>
      <el-button type="primary" @click="updatePasswd">修 改</el-button>
    </div>
  </div>
</template>

<script>
  import { updatePassword } from '@/api/jb'
  import waves from '@/directive/waves'
  import Cookies from 'js-cookie'

  export default {
    name: 'info',
    directives: {
      waves
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        if (value === undefined || value.length < 6) {
          callback(new Error('新密码不能小于6位'))
        } else {
          callback()
        }
      }
      return {
        passwd: {
          oldPassword: undefined,
          newPassword: undefined
        },
        oldPwdType: 'password',
        newPwdType: 'password',
        rules: {
          oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'change' }],
          newPassword: [{ required: true, trigger: 'change', validator: validatePassword }]
        }
      }
    },
    created() {
    },
    methods: {
      showPwd(type) {
        if (type === 1) {
          if (this.oldPwdType === 'password') {
            this.oldPwdType = ''
          } else {
            this.oldPwdType = 'password'
          }
        } else {
          if (this.newPwdType === 'password') {
            this.newPwdType = ''
          } else {
            this.newPwdType = 'password'
          }
        }
      },
      updatePasswd() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const userId = Cookies.get('userId')
            updatePassword(userId, this.passwd).then(() => {
              this.$notify({
                title: '成功',
                message: '密码修改成功',
                type: 'success',
                duration: 2000,
                onClose: () => {
                  location.reload()
                }
              })
            })
          }
        })
      }
    }
  }
</script>


